import React,{ useRef,useState } from 'react';

// 验证码组件
import Captcha from '@/components/Captcha'
import { Button, Form, Input,Space,message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined,KeyOutlined } from '@ant-design/icons';
// 导入接口请求
import { verifyCaptcha,sendPhoneMsg } from '@/api/login'
// 导入两个两个hook 用来操作redux 
import { useSelector, useDispatch } from 'react-redux';

// 短信
const MobileLogin = () => {
	const [key,setKey]  = useState('')
	let [time , setTime] = useState(10)
	// 创建dispatch 方法
	const dispatch = useDispatch()
	// 创建ref对象
	const ref1 = useRef()

	// 获取form 表单实例
	const [form] = Form.useForm();

	const onFinish = (values) => {
		//获取参数 

        console.log('value', values);
        // 调用短信登录接口, 成功后, 跳转到首页
		
	};
	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo);
	};

	//   定义一个 saveKey 函数
	const saveKey = (key) => {
		console.log('父组件',key);
		setKey(key)
	}

	let timer = null;
	// 定义发送验证码
	const sendmessageFn = () => {
		form.validateFields(['mobile','captcha']).then(res=>{
			// 表示验证通过
			console.log('验证通过',res);
			verifyCaptcha({
				key:key,
				captcha:res.captcha
			}).then((res1) => {
				// console.log('res1',res1);
				if (res1.data.errNo===0){
					// 表示图形验证码验证成功
					// 03：发送短信验证码
					// sendPhoneMsg({
					// 	token:res1.context.token,
					// 	mobile:res.mobile,
					// 	type:0
					// }).then((res2)=>{
					// 	console.log(res2);
					// })

					timer=setInterval(() => {
						time--
						if (time===0){
							time=10
							clearInterval(timer) // 清除定时器
						}
						setTime(time)

					},1000)
				}else{
					// 表示图形验证码验证失败
					message.error(res1.data.errText,1,()=>{
						ref1.current.loadashFn()
						form.setFieldsValue({
                            mobile: '',
                            captcha: ''
                        })
					})
				}
			})
		}).catch(err => {
			// 表示验证失败
			console.log('验证失败',err);
		})
	}




	return (
		<div>
			<Form
				name="basic"
				wrapperCol={{
					span: 24,
				}}
				initialValues={{
					remember: true,
				}}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off"
				size='large'
				form={form}
			>
				<Form.Item
					name="mobile"
					rules={[
					{
						required: true,
						message: '请输入手机号',
					},
					]}
				>
					<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="手机号" />
				</Form.Item>

				

				<Space>
					<Form.Item
						name="captcha"
						rules={[
						{
							required: true,
							message: '请输入验证码',
						},
						]}
					>
							<Input prefix={<LockOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
							{/* <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" /> */}
							{/* <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha> */}
					</Form.Item>
					<Form.Item>
						<Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
					</Form.Item>
				</Space>

				<Space>
					<Form.Item
						name="password"
						rules={[
						{
							required: true,
							message: '请输入验证码',
						},
						]}
					>
						<Input prefix={<KeyOutlined className="site-form-item-icon" />} type="password" placeholder="短信验证码" />
					</Form.Item>
					<Form.Item>
						<Button disabled={time !== 10} onClick={()=>{sendmessageFn()}} block>
							{time !== 10 ? `倒计时${time}秒` : '发送验证码'}
						</Button>
					</Form.Item>
				</Space>

				<Form.Item
					wrapperCol={{
					span: 24,
					}}
				>

					<Button type="primary" htmlType="submit" block>
						登录
					</Button>
				</Form.Item>
    		</Form>
		</div>
	);
}

export default MobileLogin;
